<template>
    <div class="main-content">
        <div style="padding:20px;">
            <ul style="margin-bottom:30px" class="reset-status">
                <li style="padding: 0 0;">
                    <font>当前状态：</font>{{currentStatus}}
                </li>
                <li>
                    <button type="button" class="btn checkedBtn checkMobileBtn" v-res="{code:'menu_0005_0001_0017'}" @click="customerStatusChange('')">重置报备状态</button>
                </li>
                <li>
                    <button type="button" class="btn checkedBtn checkMobileBtn" v-res="{code:'menu_0005_0001_0018'}" @click="confirmStatusChange('')">重置交易状态</button>
                </li>
            </ul>
            <ul class="custom_list clearfix">
                <!-- <#list followStatus as up>-->
                <li :class="{active:item.isActive}" v-for="(item,index) in customerArray" :key="index">
                    <div class="cut_line" :class="{'cut_line_fail':item.state}">
                        <span></span>
                    </div>
                    <div class="cut_lin" :class="{'cut_lin_fail':item.state}" v-if="item.name !='结佣'"></div>
                    <p class="cut_title">{{item.name}}</p>
                </li>
                <!-- </#list>-->
            </ul>
        </div>
        <div class="concent_title">
            <span></span>
            <p>楼盘信息</p>
            <hr>
            <ul class="info_list">
                <li>
                    <p>楼盘名称:</p>
                    <font>{{cusPre.premisesName}}</font>
                    <b><a v-on:click="premisesDetail()"><b style="color:blue;">查看楼盘详情</b></a>
                    </b>
                </li>
                <li>
                    <p>楼盘佣金:</p>
                    <font>{{cusPre.commissionAmount}}</font>
                </li>
                <li>
                    <p>带看奖:</p>
                    <font>{{cusPre.reward}}&nbsp;元</font>
                </li>
                <li>
                    <p>{{cusPre.dealType == 2?'现金奖':'成交奖'}}:</p>
                    <font>{{cusPre.dealAward}}&nbsp;元</font>
                </li>
            </ul>
        </div>
        <div class="concent_title">
            <span></span>
            <p>经纪人信息</p>
            <hr>
            <ul class="info_list">
                <li>
                    <p>报备类型:</p>
                    <font>{{cusPre.reportType}}</font>
                </li>
                <li>
                    <p>经纪人:</p>
                    <font>{{cusPre.staffName}}</font>
                </li>
                <li>
                    <p>所属公司 - 部门:</p>
                    <font>{{cusPre.staffCompanyName}}&nbsp;-&nbsp;{{cusPre.staffDepartmentName}}</font>
                </li>
                <li v-if="cusPre.reportType=='案场代报备'">
                    <p>报备人:</p>
                    <font>{{cusPre.assistantName}}</font>
                </li>
                <li>
                    <p>渠道经理:</p>
                    <font>{{cusPre.principalName}}</font>
                </li>
            </ul>
        </div>
        <br>
        <div class="concent_title">
            <span></span>
            <div>
                <p style="float: left;">客户信息</p>
                <p v-if="showCustomerInfo" style="font-weight:bold; float: right; padding-right: 20px;" @click="toCustomerInfo">更多信息 ></p>
            </div>
            <hr>
            <ul class="info_list">
                <li>
                    <p>客户:</p>
                    <font>{{cusPre.name}}&nbsp;&nbsp;{{cusPre.genderCN}}</font>
                </li>
                <li>
                    <p>客户电话:</p>
                    <font>{{cusPre.mobile}}</font>
                </li>
                <li v-if="signature">
                    <p>认购信息:</p>
                    <font>
                        楼栋号 {{cusPre.buildingName}}&nbsp;
                        房间号 {{cusPre.roomName}}
                        认购金额 {{cusPre.signatureAmount}}元
                    </font>
                </li>
                <li v-if="sign">
                    <p>签约信息:</p>
                    <font>
                        楼栋号 {{cusPre.buildingName}}&nbsp;
                        房间号 {{cusPre.roomName}}
                        计价面积 {{cusPre.valuationArea}}m²
                        成交金额{{cusPre.dealAmount}}元
                    </font>
                </li>
            </ul>
        </div>
        <div class="concent_title">
            <span></span>
            <p>其他信息</p>
            <hr>
            <ul class="info_list">
                <li>
                    <p>预计到场时间:</p>
                    <font>{{visitTime}}</font>
                </li>
                <li>
                    <p>到场方式:</p>
                    <font>{{ visitWay}}</font>
                </li>
                <li>
                    <p>备注:</p>
                    <font>{{remark}}</font>
                </li>
                <li>
                    <p>报备推荐人:</p>
                    <samp>{{cusPre.recommenderDeptName ? cusPre.recommenderDeptName + '-' + cusPre.recommenderName : cusPre.recommenderName ? cusPre.recommenderName : '无'}}</samp>
                    <button type="button" class="btn checkedBtn checkMobileBtn" v-res="{code:'menu_0005_0001_0019'}" @click="showRecommenderChangeModal()">变更推荐人</button>
                </li>
                <li>
                    <p>置业顾问:</p>
                    <samp>{{estateAdviser.name}} &emsp; {{estateAdviser.phone}}</samp>
                    <button type="button" class="btn checkedBtn checkMobileBtn" v-res="{code:'menu_0005_0001_0016'}" @click="adviserChange()">变更置业顾问</button>
                </li>
            </ul>
        </div>
        <div class="concent_title" style="width: 1080px; height: 100px;">
            <span></span>
            <p>报备期限</p>
            <hr>
            <ul class="info_list" style="margin: 25px 0;">
                <li>
                    <div>
                        <p>报备有效期:</p>
                        <font>{{ cusPre.reportValidTime || '无期限' }}</font><br>
                        <div class="info_list_desc">报备有效期内,可进行客户到访;超过报备有效期,需重新报备</div>
                    </div>
                    <div>
                        <p>报备保护期:</p>
                        <font>{{ cusPre.reportPeriodTime || '无期限' }}</font><br>
                        <div class="info_list_desc">报备保护期内,其他人员无法报备相同客户号码</div>
                    </div>
                </li>
                <li>
                    <div>
                        <p>到访保护期:</p>
                        <font>{{ cusPre.visitBaohuTime }}</font><br>
                        <div class="info_list_desc">到访保护期内,其他人员无法报备或到访相同客户号码</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="concent_title" style="width: 1080px;min-height: 210px;">
            <span></span>
            <p>首付信息</p>
            <hr>
            <ul class="info_list">
                <li>
                    <p>首付总金额:</p>
                    <font>{{cusPre.firstPayment}}元</font>
                </li>
                <li>
                    <p>首付总比例:</p>
                    <font>{{ cusPre.firstPaymentRatio}}%</font>
                </li>
                <li>
                    <p>是否交齐:</p>
                    <font>{{cusPre.payFinish==='0'?'否':cusPre.payFinish==='1'?'是':''}}</font>
                </li>
                <li>
                    <p>附件:</p>
                    <font>
                        <ul class="clearfix" id="declareIamge" style="margin-top:6px">
                            <li v-for="(item, index) in cusPre.affixList" :key="index" class="declare-follow-list">
                                <img v-img:index :src="item.url" v-if="item.fileType.toLowerCase() =='png'
							|| item.fileType.toLowerCase() =='jpg'
							|| item.fileType.toLowerCase() =='jpeg'
							|| item.fileType.toLowerCase() =='gif'" />
                                <div width="100%" height="100%" class="pic-bg-fj" v-else></div>
                                <div class="mask-page" v-if="item.fileType.toLowerCase() !='png'
							&& item.fileType.toLowerCase() !='jpg'
							&& item.fileType.toLowerCase() !='jpeg'
							&& item.fileType.toLowerCase() !='gif'"></div>
                                <div class="operation-btn" v-if="item.fileType.toLowerCase() !='png'
							&& item.fileType.toLowerCase() !='jpg'
							&& item.fileType.toLowerCase() !='jpeg'
							&& item.fileType.toLowerCase() !='gif'">
                                    <a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
                                </div>
                            </li>
                        </ul>
                    </font>
                </li>
            </ul>
        </div>
        <div class="concent_title" style="width: 1080px;min-height: 210px;" v-res="{code:'menu_0005_0003'}" v-if="cusPre.confirmStatus == 2 || cusPre.confirmStatus == 3 ">
            <span></span>
            <p>佣金信息</p>
            <hr>
            <ul class="info_list info_list_commission" style="margin: 25px 0;">
                <li v-res="{code:'menu_0005_0003_001_001'}">
                    <div>
                        <div class="clearfix">
                            <p>开发商佣金</p>
                            <button type="button" v-res="{code:'menu_0005_0003_001_004'}" v-if="commisionButtonHide" class="btn checkedBtn checkMobileBtn fr" @click="openCommissionLog('0')">历史记录</button>
                            <button type="button" v-res="{code:'menu_0005_0003_001_003'}" v-if="commisionButtonHide" class="btn checkedBtn checkMobileBtn fr" @click="openDealCommission('0',cusPre.id)">结算佣金</button>
                            <button type="button" v-res="{code:'menu_0005_0003_001_002'}" class="btn checkedBtn checkMobileBtn fr" @click="addOrEditCommission('0',cusPre.id)">确认佣金</button>
                        </div>
                        <div class="text-flex ptb-20">
                            <div class="item-commission">总佣金:
                                <font>{{reportCommission ? reportCommission.devCommission:0}}元</font>
                            </div>
                            <div class="item-commission">已结佣金:
                                <font>{{reportCommission ? reportCommission.devReceivedCommission:0}}元</font>
                            </div>
                            <div class="item-commission">待结佣金:
                                <font>{{reportCommission ? reportCommission.devPendingCommission:0}}元</font>
                            </div>
                        </div>
                    </div>
                </li>
                <li v-res="{code:'menu_0005_0003_002_001'}">
                    <div>
                        <div class="clearfix">
                            <p>合作机构佣金（此数据分销人员可见）</p>
                            <button type="button" v-res="{code:'menu_0005_0003_002_004'}" v-if="commisionButtonHide" class="btn checkedBtn checkMobileBtn fr" @click="openCommissionLog('1')">历史记录</button>
                            <button type="button" v-res="{code:'menu_0005_0003_002_003'}" v-if="commisionButtonHide" class="btn checkedBtn checkMobileBtn fr" @click="openDealCommission('1',cusPre.id)">结算佣金</button>
                            <button type="button" v-res="{code:'menu_0005_0003_002_002'}" class="btn checkedBtn checkMobileBtn fr" @click="addOrEditCommission('1',cusPre.id)">确认佣金</button>
                        </div>
                        <div class="text-flex ptb-20">
                            <div class="item-commission">总佣金:
                                <font>{{reportCommission.agentCommission ? reportCommission.agentCommission:0}}元</font>
                            </div>
                            <div class="item-commission">已结佣金:
                                <font>{{reportCommission.agentReceivedCommission ? reportCommission.agentReceivedCommission:0}}元</font>
                            </div>
                            <div class="item-commission">待结佣金:
                                <font>{{reportCommission.agentPendingCommission ? reportCommission.agentPendingCommission:0}}元</font>
                            </div>
                        </div>
                    </div>
                </li>
                <li v-res="{code:'menu_0005_0003_003_001'}">
                    <div>
                        <div class="clearfix">
                            <p>本部机构佣金</p>
                        </div>
                        <div class="text-flex ptb-20">
                            <div class="item-commission">总佣金:
                                <font>{{reportCommission.orgCommission ? reportCommission.orgCommission:0}}元</font>
                            </div>
                            <div class="item-commission">已结佣金:
                                <font>{{reportCommission.orgReceivedCommission ? reportCommission.orgReceivedCommission:0}}元</font>
                            </div>
                            <div class="item-commission">待结佣金:
                                <font>{{reportCommission.orgPendingCommission ? reportCommission.orgPendingCommission:0}}元</font>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div class="concent_title" style="width: 1080px;min-height: 210px;">
            <span></span>
            <p>跟进详情</p>
            <hr>
            <div class="custom_gj">
                <div class="cu_gj_con">
                    <div class="cu_gj_pot"></div>
                    <!-- <p>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</p> -->
                    <div class="cu_gj_text" v-for="(row, index) in listFlowUp" :key="index">
                        <font>{{row.staffName}}&nbsp;&nbsp;{{row.createTime}}&nbsp;
                            <div v-if="row.adviser" style="display:inline-block">置业顾问：【{{row.adviser}}】带看时间【{{row.visitTime}}】</div>
                        </font>
                        <font v-if="row.remark">备注：{{row.remark}}</font>
                        <!-- <b>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</b> -->
                        <ul class="clearfix" id="declareIamge" style="margin-top:6px">
                            <li v-for="(item, index) in row.affixList" :key="index" class="declare-follow-list">
                                <img v-img:index :src="item.url" v-if="item.fileType.toLowerCase() =='png'
							|| item.fileType.toLowerCase() =='jpg'
							|| item.fileType.toLowerCase() =='jpeg'
							|| item.fileType.toLowerCase() =='gif'" />
                                <div width="100%" height="100%" class="pic-bg-fj" v-else></div>
                                <div class="mask-page" v-if="item.fileType.toLowerCase() !='png'
							&& item.fileType.toLowerCase() !='jpg'
							&& item.fileType.toLowerCase() !='jpeg'
							&& item.fileType.toLowerCase() !='gif'"></div>
                                <div class="operation-btn" v-if="item.fileType.toLowerCase() !='png'
							&& item.fileType.toLowerCase() !='jpg'
							&& item.fileType.toLowerCase() !='jpeg'
							&& item.fileType.toLowerCase() !='gif'">
                                    <a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clearfix"></div>
        <adviserChangeModal :premises-id="premisesId" :customer-premises-id="customerPremisesId" :original-adviser="originalAdviser" :original-adviser-list="originalAdviserList" v-on:saveAdviserChangeReturn='saveAdviserChangeReturn'></adviserChangeModal>
        <resetAudit ref="resetAudit" v-bind:resetAuditModal="resetAuditInfo" v-on:resetListener='resetReturn'></resetAudit>
        <resetConfirm ref="resetConfirm" v-bind:resetConfirmModal="resetConfirmInfo" v-on:resetListener='resetReturn'></resetConfirm>
        <CustomerInfoModal :cusPre="cusPre" :estateAdviser="estateAdviser" :customerInfo="customerInfo" :repeatVisitFollow="repeatVisitFollow"></CustomerInfoModal>
        <CusEditCommission :editCommission="editCommission" v-on:saveEditCommissionReturn='saveEditCommissionReturn'></CusEditCommission>
        <CusDealCommission :dealCommission="dealCommission" v-on:saveDealCommissionReturn='saveDealCommissionReturn'></CusDealCommission>
        <CusCommissionLog :commissionLog="commissionLog" ref="cusCommissionLog"></CusCommissionLog>
        <recommenderChangeModal ref="recommenderChange" :customer-premises-id="customerPremisesId" :old-recommender="oldRecommender" v-on:saveRecommenderChangeReturn='saveRecommenderChangeReturn'></recommenderChangeModal>
    </div>
</template>

<script>
import CustomerStatus from "../common/customerStatusComponents.vue";
import adviserChangeModal from "../premises/components/AdviserChangeModal.vue";
import CustomerInfoModal from "./customerInfoModal.vue";
import CusEditCommission from "./cusEditCommission.vue";
import CusDealCommission from "./cusDealCommission.vue";
import CusCommissionLog from "./cusCommissionLog.vue";
import resetAudit from "./resetAudit.vue";
import resetConfirm from "./resetConfirm.vue";
import recommenderChangeModal from "./components/recommenderChangeModal.vue";
import viewer from "../../assets/js/viewer.js";
import { API, Log, Utils, Service } from "../../js/base";
export default {
  data() {
    return {
      cusPre: {},
      reportCommission: {
        agentCommission: 0,
        agentPendingCommission: 0,
        agentReceivedCommission: 0,
        devCommission: 0,
        devPendingCommission: 0,
        devReceivedCommission: 0,
        orgCommission: 0,
        orgPendingCommission: 0,
        orgReceivedCommission: 0,
      },
      editCommission: {
        commissionType: "",
        commissionId: "",
        reportId: "",
        saveType: "",
      },
      dealCommission: {
        commissionType: "",
        commissionId: "",
        reportId: "",
      },
      commissionLog: {
        commissionType: "",
        commissionId: "",
      },
      estateAdviser: {},
      customerInfo: {},
      repeatVisitFollow: [],
      showCustomerInfo: false,
      isShow: false,
      listFlowUp: [],
      latitude: "",
      longitude: "",
      fileList: [],
      isSpecialShow: false,
      rewardFlag: false,
      currentStatus: "",
      roomNum: "认购房号:",
      customerArray: [
        {
          name: "报备",
          isActive: false,
          state: false,
        },
        {
          name: "到访",
          isActive: false,
          state: false,
        },
        {
          name: "认筹",
          isActive: false,
          state: false,
        },
        {
          name: "认购",
          isActive: false,
          state: false,
        },
        {
          name: "签约",
          isActive: false,
          state: false,
        },
        {
          name: "结佣",
          isActive: false,
          state: false,
        },
      ],
      visitTime: "",
      remark: "",
      visitWay: "",
      visitWayList: ["", "集体派车", "单独派车", "自驾"],
      signature: false,
      sign: false,
      premisesId: "",
      customerPremisesId: "",
      originalAdviser: "",
      originalAdviserList: [],
      commisionButtonHide: true,
      resetAuditInfo: {},
      resetConfirmInfo: {},
      cusPreId: "",
      oldRecommender: "",
    };
  },
  created() {
    this.cusPreId = this.$route.params.cusPreId;
  },
  mounted: function() {
    this.showCustomerInfo = Utils.showCustomerInfo();
    this.findCusPreimeseInfo();
    this.flowUpList();
  },
  components: {
    CustomerStatus,
    adviserChangeModal,
    CustomerInfoModal,
    CusEditCommission,
    CusDealCommission,
    CusCommissionLog,
    resetAudit,
    resetConfirm,
    recommenderChangeModal,
  },
  methods: {
    transformationBase(data, type) {
      // 创建隐藏的可下载链接
      let eleLink = document.createElement("a");
      eleLink.download = "";
      eleLink.style.display = "none";
      let value = type.toLowerCase();
      let str = ["jpeg", "jpg", "png", "gif"];
      if (str.indexOf(value) > -1) {
        // 图片转base64地址
        let Img = new Image();
        Img.setAttribute("crossOrigin", "anonymous");
        Img.src = data;
        Img.onload = function() {
          let canvas = document.createElement("canvas");
          canvas.width = Img.width;
          canvas.height = Img.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(Img, 0, 0, Img.width, Img.height);
          eleLink.href = canvas.toDataURL("image/" + value);
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
        };
      } else {
        window.open(data);
      }
    },
    findCusPreimeseInfo: function() {
      var _self = this;
      // if (_self.cusPreId) {
      //     window.localStorage.setItem("1_cusPreId", _self.cusPreId);
      // } else {
      //     _self.cusPreId = window.localStorage.getItem("1_cusPreId");
      // }
      var initData = {
        id: _self.cusPreId,
      };
      var url = this.utilHelper.apiUrl + "/api/getCPDetail";
      var body = {};
      body.params = initData;
      _self.$http.post(url, body).then(
        (response) => {
          var body = response.body;
          if (body.rewardFlag == "true") {
            _self.rewardFlag = true;
          }
          _self.cusPre = body.resData.cpDto;
          if (body.resData.reportCommission) {
            _self.reportCommission = body.resData.reportCommission;
            _self.commisionButtonHide = true;
            this.editCommission.commissionId = _self.reportCommission.id;
            this.dealCommission.commissionId = _self.reportCommission.id;
            this.commissionLog.commissionId = _self.reportCommission.id;
            this.editCommission.saveType = "edit";
          } else {
            _self.reportCommission = {
              agentCommission: 0,
              agentPendingCommission: 0,
              agentReceivedCommission: 0,
              devCommission: 0,
              devPendingCommission: 0,
              devReceivedCommission: 0,
              orgCommission: 0,
              orgPendingCommission: 0,
              orgReceivedCommission: 0,
            };
            _self.commisionButtonHide = false;
            this.editCommission.saveType = "add";
          }
          if (body.resData.reportVisit) {
            _self.visitTime = body.resData.reportVisit.visitTime;
            if (body.resData.reportVisit.visitWay) {
              _self.visitWay =
                _self.visitWayList[Number(body.resData.reportVisit.visitWay)];
            }
            _self.remark = body.resData.reportVisit.remark;
          }
          if (!_self.cusPre.visitBaohuTime) {
            if (_self.cusPre.customerStatus != 6) {
              _self.cusPre.visitBaohuTime = " ";
            } else {
              _self.cusPre.visitBaohuTime = "无期限";
            }
          }
          _self.currentStatus =
            body.resData.cpDto.currentStatusMap.currentStatus;
          const length = body.resData.cpDto.currentStatusMap.index;
          //设置亮灯个数
          for (var i = 0; i < 7; i++) {
            if (length > i) {
              _self.customerArray[i].isActive = true;
            } else {
              if (_self.customerArray[i]) {
                _self.customerArray[i].isActive = false;
              }
            }
          }
          if (length > 0) {
            _self.customerArray[length - 1]["state"] =
              body.resData.cpDto.currentStatusMap.value == "1" ? false : true;
          }
          if (length >= 5) {
            _self.roomNum = "签约房号：";
          }
          if (length > 4) {
            _self.isShow = true;
          }

          if (_self.cusPre.confirmStatus == 2) {
            _self.isShow = true;
            _self.signature = true;
            _self.sign = false;
            if (!_self.cusPre.signatureAmount) {
              _self.cusPre.signatureAmount = 0;
            }
          } else if (_self.cusPre.confirmStatus == 3) {
            _self.isShow = true;
            _self.signature = false;
            _self.sign = true;
          }
          if (_self.cusPre) {
            var cusPre = _self.cusPre;
            var commission = cusPre.commissionAmount;
            if (commission) {
              var commissionJson = JSON.parse(commission);
              var commissionStr = "";
              for (var jsonStr in commissionJson) {
                if (commissionJson[jsonStr].typeValue) {
                  commissionStr +=
                    commissionJson[jsonStr].name +
                    " " +
                    commissionJson[jsonStr].typeValue +
                    "" +
                    commissionJson[jsonStr].type +
                    "  ";
                }
              }
              cusPre.commissionAmount = commissionStr;
            }

            _self.premisesId = cusPre.premisesId;
            _self.customerPremisesId = cusPre.id;
            _self.originalAdviser = cusPre.adviserUuid;
            _self.getAdviserList(cusPre.premisesId);

            _self.oldRecommender = cusPre.recommenderUuid;

            _self.customerInfo = body.resData.customerInfo || {};
            _self.estateAdviser = body.resData.estateAdviser || {};
            _self.repeatVisitFollow = body.resData.repeatVisitFollow || [];
          }
        },
        (response) => {
          // console.log(response);
        }
      );
      //约看信息
    },
    premisesDetail: function() {
      var _self = this;
      if (_self.cusPre.premisesDelFlag == "11") {
        layer.alert("楼盘已被删除");
      } else {
        this.$router.push({
          name: "premisesDetail",
          params: {
            premisesId: _self.cusPre.premisesId,
          },
        });
      }
    },
    flowUpList: function() {
      //查询客户报备根基记录
      var _self = this;
      // if (_self.cusPreId) {
      //     window.localStorage.setItem("1_cusPreId", _self.cusPreId);
      // } else {
      //     _self.cusPreId = window.localStorage.getItem("1_cusPreId");
      // }
      var listFlowUpData = {
        customerPremisesId: _self.cusPreId,
      };
      var url = this.utilHelper.apiUrl + "/api/getCPFollowList";
      var body = {};
      body.params = listFlowUpData;
      _self.$http.post(url, body).then(
        (response) => {
          _self.listFlowUp = response.body.resData.followList;
        },
        (respones) => {
          // console.log(response);
        }
      );
    },
    //获取图片列表
    getImages(id) {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/file/getFiles.do";
      _self.$http
        .post(url, {
          id: id,
        })
        .then((response) => {
          var body = response.body;
          if (body.result == 1) {
            _self.fileList = body.resData;
            var html = "";
            for (var i = 0; i < _self.fileList.length; i++) {
              html +=
                '<li style="float: left;width: 84px;height: 84px;margin-right: 10px;">' +
                '<img style="width:100%;height:100%;" src="' +
                _self.fileList[i].url +
                '"></li>';
            }
            $("#imgList").html(html);
            $("#imgList").viewer();
          }
        });
    },
    canel() {
      var _self = this;
      $("#cusPreDetailModal").modal("hide");
      _self.$emit("closeModalListener");
    },
    getAdviserList(id) {
      const _this = this;
      _this.originalAdviserList = [];
      if (!id) return;
      let index = -1;
      Service.Adviser.getAdviserList(id, this)
        .then((list) => {
          if (list && list.length) {
            _this.originalAdviserList = list;
          }
        })
        .catch((e) => {});
    },
    adviserChange(adviserUuid) {
      // this.$parent.originalAdviser = adviserUuid;
      $("#adviserChangeModal").modal("show");
    },
    saveAdviserChangeReturn() {
      this.findCusPreimeseInfo();
    },
    showRecommenderChangeModal() {
      this.$refs.recommenderChange.getRecommenderList(this.premisesId);
      $("#recommenderChangeModal").modal("show");
    },
    saveRecommenderChangeReturn() {
      this.findCusPreimeseInfo();
    },
    toCustomerInfo: function(id) {
      $("#customerInfoModal").modal({
        backdrop: "static",
        keyboard: false,
      });
    },
    addOrEditCommission(commissionType, reportId) {
      this.editCommission.commissionType = commissionType;
      this.editCommission.reportId = reportId;
      $("#cusEditCommission").modal("show");
    },
    saveEditCommissionReturn() {
      this.findCusPreimeseInfo();
    },
    openDealCommission(commissionType, reportId) {
      this.dealCommission.commissionType = commissionType;
      this.dealCommission.reportId = reportId;
      $("#cusDealCommission").modal("show");
    },
    saveDealCommissionReturn() {
      this.findCusPreimeseInfo();
    },
    openCommissionLog(commissionType) {
      this.commissionLog.commissionType = commissionType;
      this.$refs.cusCommissionLog.initCommissionLog();
      $("#cusCommissionLog").modal("show");
    },
    customerStatusChange() {
      this.resetAuditInfo.id = this.cusPre.id;
      this.resetAuditInfo.customerStatus = this.cusPre.customerStatus;
      this.resetAuditInfo.confirmStatus = this.cusPre.confirmStatus;
      this.$refs.resetAudit.init();
      $("#resetAuditModal").modal({
        backdrop: "static",
        keyboard: false,
      });
    },
    confirmStatusChange() {
      this.resetConfirmInfo.id = this.cusPre.id;
      this.resetConfirmInfo.customerStatus = this.cusPre.customerStatus;
      this.resetConfirmInfo.confirmStatus = this.cusPre.confirmStatus;
      $("#resetConfirmModal").modal({
        backdrop: "static",
        keyboard: false,
      });
    },
    resetReturn() {
      this.findCusPreimeseInfo();
    },
  },
};
</script>

<style scoped>
.template-list:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

.declare-follow-list {
  float: left;
  width: 100px;
  height: 80px;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
}

.declare-follow-list img {
  width: 100%;
  height: 100%;
}

.declare-follow-list .mask-page {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #000;
  opacity: 0.5;
  display: none;
}

.declare-follow-list .operation-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  display: none;
}

.declare-follow-list .operation-btn a {
  color: #fff;
  line-height: 20px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.declare-follow-list:hover .mask-page {
  display: inline-block;
}

.declare-follow-list:hover .operation-btn {
  display: inline-block;
}
.concent_title {
  width: 45%;
  min-height: 210px;
  float: left;
  margin: 5px 10px;
  border: 1px solid #d7d7d7;
}
.info_list {
  margin-bottom: 0px;
}
.info_list li {
  margin-bottom: 5px;
  line-height: 25px;
}
.info_list li > div {
  width: 50%;
  float: left;
}
.info_list li div p,
font {
  font-size: 14px;
  font-weight: 600;
}
.info_list li .info_list_desc {
  margin-left: 26px;
  color: #999;
}
.concent_sub {
  float: left;
  width: 50%;
}
.modal-body {
  margin: 10px 0;
  height: 700px;
  overflow: scroll;
}
.checkMobileBtn {
  padding: 0px 5px;
}
.item-commission {
  box-sizing: border-box;
  width: 30%;
  float: right;
}
.ptb-20 {
  padding: 20px 0;
}
.text-flex {
  display: flex;
  justify-content: space-between;
}
.info_list_commission li {
  padding: 0 30px;
}
.info_list_commission li button {
  margin-left: 10px;
}
.info_list_commission li p {
  width: auto;
  font-size: 13px;
  font-weight: 600;
}
.reset-status li {
  float: left;
  padding: 0 10px;
}
</style>

